import React, { Component, PureComponent, useState, useEffect } from 'react'
import { Link } from "react-router-dom";
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import '@/css/Home.css';

import CardList2 from '@/comps/CardList2.js'
import scrollDown from '@/utils/scrollDown.js'

import Api from '@/config/api.js'


import { getPoint } from '@/utils/utils.js';
import ScrollDown from '@/utils/scrollDown.js';

export default function () {
  var [catCur, setCatCur] = useState(0)
  var [slideWidth, setSlideWidth] = useState([])
  var [slidePosition, setSlidePosition] = useState([])
  useEffect(() => {
    catSlideSwitch(0)
  })
  var catSlideSwitch = (idx) => {
    setCatCur(idx)
      ;[...document.querySelectorAll('.cat-title-font')].map((v, k) => {
        slideWidth.splice(k, 1, v.offsetWidth)
        slidePosition.splice(k, 1, getPoint(v).l)
      })

    document.querySelector('#slide_span').style.width = slideWidth[idx] + 'px'
    document.querySelector('#slide_span').style.transform = 'translate(' + slidePosition[idx] + 'px,-100%)'
    if (!document.querySelector('#slide_span').style.transition) {
      document.querySelector('#slide_span').style.transition = 'all .2s'
    }
  }
}
return (
  <div>
    <div className="cat-relative">
      <div className="yt yt-ae yt-pc cat-wrap">
        <div className={["cat-title", catCur === 0 ? "cat-title-cur" : ""].join(' ')} onClick={catSlideSwitch.bind(this, 0)}><span className="cat-title-font">广场</span></div>
        <div className={["cat-title", catCur === 1 ? "cat-title-cur" : ""].join(' ')} onClick={catSlideSwitch.bind(this, 1)}><span className="cat-title-font">我的</span></div>
      </div>
      <div className="slide-span" id="slide_span"></div>
    </div>
    <div className="search-ui"><i className="alifont font12">&#xe62a;</i>&nbsp;搜索</div>

    {/* <Link to="/resetpassword">去resetpassword页面</Link> */}

  </div>
)
